<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="student-home">
    <!-- 页面头部 -->
    <div class="header-section">
      <div class="welcome-text">
        <h2>欢迎回来，{{ studentInfo.name }}</h2>
        <p>今天是运动会第{{ currentDay }}天，距离结束还有{{ remainingDays }}天</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="navigateToEnrollment">
          立即报名
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon enrolled">
              <el-icon><List /></el-icon>
            </div>
            <div class="stat-info">
              <h3>已报名项目</h3>
              <p class="stat-number">{{ enrolledCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon completed">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <h3>已完成项目</h3>
              <p class="stat-number">{{ completedCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon pending">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <h3>待参赛项目</h3>
              <p class="stat-number">{{ pendingCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon rank">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <h3>最佳成绩</h3>
              <p class="stat-number">{{ bestRank }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 个人信息卡片 -->
      <el-col :span="8">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>个人信息</h3>
              <el-button type="text" @click="editProfile">编辑</el-button>
            </div>
          </template>
          <div class="profile-info">
            <div class="avatar-section">
              <el-avatar :size="80" :src="studentInfo.avatar" class="user-avatar">
                {{ studentInfo.name.substring(0, 1) }}
              </el-avatar>
              <div class="user-name">{{ studentInfo.name }}</div>
              <el-tag :type="getGenderTagType(studentInfo.gender)" size="small">
                {{ studentInfo.gender }}
              </el-tag>
            </div>
            <div class="info-list">
              <div class="info-item">
                <span class="label">学号：</span>
                <span class="value">{{ studentInfo.studentId }}</span>
              </div>
              <div class="info-item">
                <span class="label">班级：</span>
                <span class="value">{{ studentInfo.className }}</span>
              </div>
              <div class="info-item">
                <span class="label">联系方式：</span>
                <span class="value">{{ studentInfo.phone }}</span>
              </div>
              <div class="info-item">
                <span class="label">紧急联系人：</span>
                <span class="value">{{ studentInfo.emergencyContact }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 已报名项目 -->
      <el-col :span="16">
        <el-card class="projects-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>我的报名项目</h3>
              <el-button type="text" @click="navigateToEnrollment">查看更多</el-button>
            </div>
          </template>
          <div v-loading="projectsLoading" class="projects-container">
            <el-empty v-if="myProjects.length === 0" description="暂无报名项目">
              <el-button type="primary" @click="navigateToEnrollment">立即报名</el-button>
            </el-empty>
            <div v-else class="project-list">
              <div
                v-for="project in myProjects"
                :key="project.id"
                class="project-item"
                @click="viewProjectDetails(project)">
                <div class="project-header">
                  <h4 class="project-name">{{ project.name }}</h4>
                  <el-tag :type="getProjectStatusType(project.status)" size="small">
                    {{ project.status }}
                  </el-tag>
                </div>
                <div class="project-info">
                  <div class="info-row">
                    <span class="info-label">比赛时间：</span>
                    <span class="info-value">{{ project.competitionTime }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">比赛地点：</span>
                    <span class="info-value">{{ project.location }}</span>
                  </div>
                  <div class="info-row" v-if="project.score !== null">
                    <span class="info-label">成绩：</span>
                    <span class="info-value score">{{ project.score }}</span>
                  </div>
                  <div class="info-row" v-if="project.rank">
                    <span class="info-label">名次：</span>
                    <span class="info-value rank">{{ project.rank }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 消息通知 -->
      <el-col :span="12">
        <el-card class="notification-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>消息通知</h3>
              <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">
                <el-button type="text" @click="markAllRead">全部已读</el-button>
              </el-badge>
            </div>
          </template>
          <div v-loading="notificationsLoading" class="notifications-container">
            <el-empty v-if="notifications.length === 0" description="暂无消息通知" />
            <div v-else class="notification-list">
              <div
                v-for="notification in notifications.slice(0, 5)"
                :key="notification.id"
                :class="['notification-item', { 'unread': !notification.read }]"
                @click="handleNotificationClick(notification)">
                <div class="notification-icon">
                  <el-icon :color="getNotificationColor(notification.type)">
                    <component :is="getNotificationIcon(notification.type)" />
                  </el-icon>
                </div>
                <div class="notification-content">
                  <h4 class="notification-title">{{ notification.title }}</h4>
                  <p class="notification-desc">{{ notification.content }}</p>
                  <span class="notification-time">{{ formatTime(notification.createTime) }}</span>
                </div>
                <div class="notification-actions">
                  <el-button v-if="!notification.read" type="text" size="small" @click.stop="markAsRead(notification)">
                    标记已读
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 运动会公告 -->
      <el-col :span="12">
        <el-card class="announcement-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>运动会公告</h3>
              <el-button type="text" @click="viewAllAnnouncements">查看全部</el-button>
            </div>
          </template>
          <div v-loading="announcementsLoading" class="announcements-container">
            <el-empty v-if="announcements.length === 0" description="暂无公告" />
            <div v-else class="announcement-list">
              <div
                v-for="announcement in announcements.slice(0, 5)"
                :key="announcement.id"
                class="announcement-item"
                @click="viewAnnouncementDetails(announcement)">
                <div class="announcement-header">
                  <h4 class="announcement-title">{{ announcement.title }}</h4>
                  <el-tag
                    :type="getAnnouncementType(announcement.type)"
                    size="small">
                    {{ announcement.type }}
                  </el-tag>
                </div>
                <p class="announcement-summary">{{ announcement.summary }}</p>
                <span class="announcement-time">{{ formatTime(announcement.publishTime) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 项目详情对话框 -->
    <el-dialog
      v-model="projectDetailVisible"
      :title="selectedProject?.name"
      width="600px"
      destroy-on-close>
      <div v-if="selectedProject" class="project-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="项目类型">{{ selectedProject.type }}</el-descriptions-item>
          <el-descriptions-item label="性别限制">{{ getGenderLimitText(selectedProject.genderLimit) }}</el-descriptions-item>
          <el-descriptions-item label="比赛时间">{{ selectedProject.competitionTime }}</el-descriptions-item>
          <el-descriptions-item label="比赛地点">{{ selectedProject.location }}</el-descriptions-item>
          <el-descriptions-item label="报名状态">
            <el-tag :type="getProjectStatusType(selectedProject.status)">
              {{ selectedProject.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="成绩">{{ selectedProject.score || '暂无成绩' }}</el-descriptions-item>
        </el-descriptions>
        <div v-if="selectedProject.description" class="project-description">
          <h4>项目说明</h4>
          <p>{{ selectedProject.description }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 公告详情对话框 -->
    <el-dialog
      v-model="announcementDetailVisible"
      :title="selectedAnnouncement?.title"
      width="700px"
      destroy-on-close>
      <div v-if="selectedAnnouncement" class="announcement-detail">
        <div class="announcement-meta">
          <el-tag :type="getAnnouncementType(selectedAnnouncement.type)">
            {{ selectedAnnouncement.type }}
          </el-tag>
          <span class="publish-time">发布时间：{{ formatTime(selectedAnnouncement.publishTime) }}</span>
        </div>
        <div class="announcement-content" v-html="selectedAnnouncement.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 定义组件名称
defineOptions({
  name: 'StudentHome'
})
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import {
  List, Check, Clock, Trophy
} from '@element-plus/icons-vue'
import { getMyEnrollments, getMyEnrollmentStats } from '@/api/enrollment'
import { getMyNotifications, markNotificationAsRead, markAllNotificationsAsRead } from '@/api/notification'
import { getAnnouncements } from '@/api/announcement'
import { getUserProfile } from '@/api/user'

// 路由和状态管理
const router = useRouter()
const authStore = useAuthStore()

// 响应式数据
const studentInfo = ref({
  name: '',
  studentId: '',
  className: '',
  gender: '',
  phone: '',
  emergencyContact: '',
  avatar: ''
})

// 加载状态
const projectsLoading = ref(false)
const notificationsLoading = ref(false)
const announcementsLoading = ref(false)

// 统计数据
const enrolledCount = ref(0)
const completedCount = ref(0)
const pendingCount = ref(0)
const bestRank = ref('-')
const currentDay = ref(1)
const remainingDays = ref(2)

// 我的项目
const myProjects = ref([])

// 消息通知
const notifications = ref([])
const unreadCount = ref(0)

// 公告
const announcements = ref([])

// 对话框状态
const projectDetailVisible = ref(false)
const announcementDetailVisible = ref(false)
const selectedProject = ref(null)
const selectedAnnouncement = ref(null)

// 从Pinia获取用户信息
const currentUser = computed(() => authStore.userInfo)

// 获取用户个人信息
const fetchStudentInfo = async () => {
  try {
    const response = await getUserProfile(currentUser.value.userId)
    if (response.code === 200) {
      studentInfo.value = response.data
    }
  } catch (error) {
    // 学生信息获取失败处理
    // 使用默认数据
    studentInfo.value = {
      name: currentUser.value.realName || '学生',
      studentId: '2023001',
      className: '高三一班',
      gender: '男',
      phone: '138****5678',
      emergencyContact: '张老师 139****1234',
      avatar: ''
    }
  }
}

// 获取我的报名项目和统计
const fetchMyProjects = async () => {
  projectsLoading.value = true
  try {
    // 获取报名统计
    const statsResponse = await getMyEnrollmentStats()
    if (statsResponse.code === 200) {
      const stats = statsResponse.data
      enrolledCount.value = stats.total || 0
      completedCount.value = stats.completed || 0
      pendingCount.value = stats.pending || 0
      bestRank.value = stats.bestRank || '-'
    }

    // 获取报名项目列表
    const response = await getMyEnrollments()
    if (response.code === 200) {
      myProjects.value = (response.data || []).map(item => ({
        id: item.id,
        name: item.projectName,
        type: item.projectType,
        status: getEnrollmentStatusText(item.status),
        competitionTime: item.competitionTime || '待定',
        location: item.location || '待定',
        score: item.score,
        rank: item.rank,
        description: item.projectDescription,
        genderLimit: item.genderLimit
      }))
    }
  } catch (error) {
    // 项目信息获取失败处理
    // 使用模拟数据
    myProjects.value = [
      {
        id: 1,
        name: '100米短跑',
        type: '径赛',
        status: '已报名',
        competitionTime: '2025-10-15 14:00',
        location: '操场第一跑道',
        score: null,
        rank: null,
        description: '标准100米短跑比赛',
        genderLimit: '男'
      },
      {
        id: 2,
        name: '跳远',
        type: '田赛',
        status: '待确认',
        competitionTime: '2025-10-16 10:00',
        location: '沙坑区',
        score: null,
        rank: null,
        description: '立定跳远比赛',
        genderLimit: '无'
      }
    ]
    enrolledCount.value = 2
    completedCount.value = 0
    pendingCount.value = 2
  } finally {
    projectsLoading.value = false
  }
}

// 获取消息通知
const fetchNotifications = async () => {
  notificationsLoading.value = true
  try {
    const response = await getMyNotifications()
    if (response.code === 200) {
      notifications.value = response.data || []
      unreadCount.value = notifications.value.filter(n => !n.read).length
    }
  } catch (error) {
    // 消息通知获取失败处理
    // 使用模拟数据
    notifications.value = [
      {
        id: 1,
        type: 'system',
        title: '报名审核通过',
        content: '您报名的"100米短跑"项目已通过审核，请准时参加比赛。',
        createTime: '2025-10-12 09:30:00',
        read: false
      },
      {
        id: 2,
        type: 'reminder',
        title: '比赛提醒',
        content: '您报名的"跳远"项目将于明天10:00开始，请提前做好准备。',
        createTime: '2025-10-11 16:20:00',
        read: false
      },
      {
        id: 3,
        type: 'announcement',
        title: '赛程变更通知',
        content: '因天气原因，原定于10月15日的部分比赛将延期举行。',
        createTime: '2025-10-10 14:15:00',
        read: true
      }
    ]
    unreadCount.value = notifications.value.filter(n => !n.read).length
  } finally {
    notificationsLoading.value = false
  }
}

// 获取公告
const fetchAnnouncements = async () => {
  announcementsLoading.value = true
  try {
    const response = await getAnnouncements({ type: 'student', limit: 10 })
    if (response.code === 200) {
      announcements.value = response.data || []
    }
  } catch (error) {
    // 公告信息获取失败处理
    // 使用模拟数据
    announcements.value = [
      {
        id: 1,
        type: '重要通知',
        title: '运动会开幕式时间通知',
        summary: '本届运动会开幕式将于10月14日上午8:00在学校操场举行，请各位同学准时参加。',
        content: '<p>本届运动会开幕式将于10月14日上午8:00在学校操场举行，请各位同学准时参加。</p><p>开幕式流程：</p><ol><li>升国旗仪式</li><li>校长致辞</li><li>运动员代表宣誓</li><li>裁判员代表宣誓</li><li>宣布运动会开幕</li></ol>',
        publishTime: '2025-10-10 09:00:00'
      },
      {
        id: 2,
        type: '赛程安排',
        title: '比赛场地分布图',
        summary: '各比赛项目场地分布图已更新，请查看详情了解具体位置。',
        content: '<p>各比赛项目场地分布如下：</p><ul><li>径赛项目：操场1-8跑道</li><li>田赛项目：操场周边各专门区域</li><li>球类项目：体育馆及室外球场</li></ul>',
        publishTime: '2025-10-09 15:30:00'
      },
      {
        id: 3,
        type: '温馨提示',
        title: '运动员注意事项',
        summary: '请各位参赛同学注意比赛纪律和安全事项，确保比赛顺利进行。',
        content: '<p>运动员注意事项：</p><ol><li>请提前30分钟到达比赛场地</li><li>穿着合适的运动服装和运动鞋</li><li>携带学生证以便身份核对</li><li>注意比赛安全，遵守裁判指挥</li><li>保持良好的体育道德风尚</li></ol>',
        publishTime: '2025-10-08 10:15:00'
      }
    ]
  } finally {
    announcementsLoading.value = false
  }
}

// 工具函数
const getGenderTagType = (gender) => {
  return gender === '男' ? 'primary' : 'danger'
}

const getProjectStatusType = (status) => {
  const typeMap = {
    '已报名': 'success',
    '待确认': 'warning',
    '已完成': 'info',
    '已取消': 'danger'
  }
  return typeMap[status] || 'info'
}

const getEnrollmentStatusText = (status) => {
  const statusMap = {
    'PENDING': '待确认',
    'APPROVED': '已报名',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

const getGenderLimitText = (genderLimit) => {
  const genderMap = {
    'MALE': '仅限男生',
    'FEMALE': '仅限女生',
    'ALL': '无限制'
  }
  return genderMap[genderLimit] || '无限制'
}

const getNotificationIcon = (type) => {
  const iconMap = {
    'system': 'List',
    'reminder': 'Clock',
    'announcement': 'Check',
    'achievement': 'Trophy'
  }
  return iconMap[type] || 'List'
}

const getNotificationColor = (type) => {
  const colorMap = {
    'system': '#409EFF',
    'reminder': '#E6A23C',
    'announcement': '#67C23A',
    'achievement': '#F56C6C'
  }
  return colorMap[type] || '#409EFF'
}

const getAnnouncementType = (type) => {
  const typeMap = {
    '重要通知': 'danger',
    '赛程安排': 'primary',
    '温馨提示': 'success',
    '成绩公布': 'warning'
  }
  return typeMap[type] || 'info'
}

const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date

  if (diff < 60 * 1000) {
    return '刚刚'
  } else if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`
  } else if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
  } else {
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  }
}

// 事件处理函数
const navigateToEnrollment = () => {
  router.push('/student/project-enrollment')
}

const editProfile = () => {
  ElMessage.info('个人信息编辑功能开发中')
}

const viewProjectDetails = (project) => {
  selectedProject.value = project
  projectDetailVisible.value = true
}

const handleNotificationClick = async (notification) => {
  if (!notification.read) {
    await markAsRead(notification)
  }
  // 可以根据通知类型进行不同处理
  if (notification.type === 'achievement') {
    ElMessage.success('恭喜获得新成就！')
  }
}

const markAsRead = async (notification) => {
  try {
    const response = await markNotificationAsRead(notification.id)
    if (response.code === 200) {
      notification.read = true
      unreadCount.value = notifications.value.filter(n => !n.read).length
    }
  } catch (error) {
    // 标记已读操作失败处理
  }
}

const markAllRead = async () => {
  try {
    const response = await markAllNotificationsAsRead()
    if (response.code === 200) {
      notifications.value.forEach(n => n.read = true)
      unreadCount.value = 0
      ElMessage.success('已标记全部消息为已读')
    }
  } catch (error) {
    // 标记全部已读操作失败处理
  }
}

const viewAllAnnouncements = () => {
  ElMessage.info('查看全部公告功能开发中')
}

const viewAnnouncementDetails = (announcement) => {
  selectedAnnouncement.value = announcement
  announcementDetailVisible.value = true
}

// 初始化页面数据
onMounted(async () => {
  // 设置运动会进度
  const today = new Date()
  const startDate = new Date('2025-10-14') // 假设运动会开始日期
  const endDate = new Date('2025-10-16')   // 假设运动会结束日期

  if (today >= startDate && today <= endDate) {
    currentDay.value = Math.floor((today - startDate) / (24 * 60 * 60 * 1000)) + 1
    remainingDays.value = Math.floor((endDate - today) / (24 * 60 * 60 * 1000)) + 1
  } else if (today < startDate) {
    currentDay.value = 0
    remainingDays.value = Math.floor((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1
  } else {
    currentDay.value = Math.floor((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1
    remainingDays.value = 0
  }

  // 加载数据
  await Promise.all([
    fetchStudentInfo(),
    fetchMyProjects(),
    fetchNotifications(),
    fetchAnnouncements()
  ])
})
</script>

<style scoped>
/* 整体布局 */
.student-home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.welcome-text h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.welcome-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
}

.stat-icon.enrolled {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.stat-icon.completed {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.stat-icon.pending {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.stat-icon.rank {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.stat-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #606266;
  font-weight: normal;
}

.stat-number {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

/* 卡片通用样式 */
.info-card,
.projects-card,
.notification-card,
.announcement-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
}

.info-card:hover,
.projects-card:hover,
.notification-card:hover,
.announcement-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

/* 个人信息卡片 */
.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  margin-bottom: 12px;
  background-color: #409EFF;
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.info-list {
  width: 100%;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  color: #909399;
  font-size: 14px;
}

.info-item .value {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

/* 项目列表 */
.projects-container {
  min-height: 200px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.project-item {
  padding: 16px;
  background-color: #fafbfc;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-item:hover {
  background-color: #f0f2f5;
  border-color: #c6e2ff;
  transform: translateY(-2px);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.project-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  font-size: 14px;
}

.info-label {
  color: #909399;
  margin-right: 8px;
  min-width: 80px;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.info-value.score {
  color: #67C23A;
  font-weight: bold;
}

.info-value.rank {
  color: #E6A23C;
  font-weight: bold;
}

/* 通知列表 */
.notifications-container {
  min-height: 200px;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  padding: 12px;
  background-color: #fafbfc;
  border-radius: 8px;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-item:hover {
  background-color: #f0f2f5;
}

.notification-item.unread {
  background-color: #f0f9ff;
  border-left-color: #409EFF;
}

.notification-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.1);
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.notification-desc {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-time {
  font-size: 12px;
  color: #909399;
}

.notification-actions {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

/* 公告列表 */
.announcements-container {
  min-height: 200px;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-item {
  padding: 12px;
  background-color: #fafbfc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.announcement-item:hover {
  background-color: #f0f2f5;
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.announcement-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.announcement-summary {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #606266;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-time {
  font-size: 12px;
  color: #909399;
}

/* 对话框内容 */
.project-detail,
.announcement-detail {
  padding: 16px 0;
}

.project-description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.project-description h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.project-description p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.announcement-meta {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.publish-time {
  margin-left: 12px;
  font-size: 14px;
  color: #909399;
}

.announcement-content {
  color: #303133;
  line-height: 1.8;
}

.announcement-content :deep(p) {
  margin: 0 0 12px 0;
}

.announcement-content :deep(ul),
.announcement-content :deep(ol) {
  margin: 0 0 12px 0;
  padding-left: 24px;
}

.announcement-content :deep(li) {
  margin-bottom: 6px;
}

</style>